<template>
  <div id="app">
    <div class="bg">
      <div class="proflieCard">
        <div class="logo1">
          <img src="./assets/img/background/logo.png" alt="" class="logo2">
        </div>
        <p class="name">吃了么平台</p>
        <div class="slogan" id="slogan">
          <p class="slogan2" id="slogan2">一只楚楚猫</p>
        </div>
        <div class="buttons">
          <button class="button1" @click="aboutMe()">关于我</button>
          <button class="button1" @click="toLogin()">登录</button>
          <button class="button1" @click="toGeneralHome()">餐厅门户</button>
        </div>
      </div>

      <div class="background" id="background"></div>
      <div class="yinghua" id="yinghua"></div>
<!--      <div class="background2" id="background2"></div>-->
      <canvas class="fireworks"
              style="position: fixed; left: 0; top: 0; z-index: 99999999; pointer-events: none;"></canvas>
    </div>
  </div>
</template>


<script>
/**
 * 引入main.js中aboutMe()、load2D_bg()、load2D_bg2_2()、load2D_yinghua()、load2D_bg2_2()方法
 */
import {aboutMe, load2D_bg, load2D_yinghua, load2D_bg2, load2D_bg2_2} from "@/api/background";
/**
 * 引入jQuery
 */
import $ from "jquery"

export default {
  data() {
    return {
      redirect: undefined
    }
  },
  beforeCreate() {
    $(document).ready(function () {
      window.onload = load2D_bg();
      window.onload = load2D_bg2();
      window.onload = load2D_bg2_2();
      window.onload = load2D_yinghua();
    })
  },
  methods: {
    /**
     * 关于我
     */
    aboutMe: function () {
      aboutMe();
    },
    /**
     * 跳转到登录页面
     */
    toLogin: function (){
      this.$router.push(
          {
            path: '/login'
          }
      )
    },
    /**
     * 跳转到商品门户页面
     */
    toGeneralHome(){
      this.$router.push({
        path: "/general/commodity"
      })
    }
  }
}
</script>

<style lang="less">

@import "./assets/less/background.less";

</style>
